<template>
    <div class="sys-opera-log">
        <search-table ref="searchTable" :columns="columns" :params="searchForm" url="/admin/v1/sysOperaLog/queryPage">
            <!-- 搜索区域插槽 -->
            <template #toolbar>
                <a-form :model="searchForm" layout="horizontal" auto-label-width>
                    <a-row :gutter="10">
                        <a-col :span="8">
                            <a-form-item label="操作模块" field="title">
                                <a-input v-model="searchForm.title" placeholder="请输入操作模块" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label="操作类型" field="businessType">
                                <a-select v-model="searchForm.businessType" placeholder="请选择操作类型">
                                    <a-option label="登录" value="LOGIN" />
                                    <a-option label="新增" value="INSERT" />
                                    <a-option label="修改" value="UPDATE" />
                                    <a-option label="删除" value="DELETE" />
                                    <a-option label="查询" value="OTHER" />
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <!-- <a-col :span="8">
                            <a-form-item label="操作时间" field="operTime">
                                <a-date-picker v-model="searchForm.operTime" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" />
                            </a-form-item>
                        </a-col> -->
                        <a-col :span="8">
                            <a-button type="primary" @click="searchTable.load()">查询</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </template>
        </search-table>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import SearchTable from '@/components/searchTable.vue'

// 搜索表单数据
const searchForm = reactive({
    operName: '',
    businessType: ''
})

// 表格列配置
const columns = [
    {
        title: '操作模块',
        dataIndex: 'title'
    },
    {
        title: '操作类型',
        dataIndex: 'businessType',
        formatter: (row) => {
            const typeMap = {
                1: '新增',
                2: '修改',
                3: '删除',
                4: '查询'
            }
            return typeMap[row.businessType] || '-'
        }
    },
    {
        title: '操作人',
        dataIndex: 'operRecordName'
    },
    {
        title: 'IP地址',
        dataIndex: 'operIp'
    },
    {
        title: '操作时间',
        dataIndex: 'operTime'
    }
]

const searchTable = ref()

</script>

<style lang="scss" scoped>
.sys-opera-log {
    padding: 20px;
}
</style>